---
id: color-picker
title: Color Picker
description: A component that allows users to select a color from a color picker.
---

<ComponentPreview id="ColorPicker" />

## Anatomy

To set up the color picker correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="color-picker" />

## Examples

Learn how to use the `ColorPicker` component in your project. Let's take a look at the most basic example

<Example id="basic" />

### Controlled

Use the `value` and `onValueChange` props to programatically control the color picker's state.

<Example id="controlled" />

> Alternatively, the `onValueChangeEnd` prop can be used to listen for when the user has finished selecting a color.

### Field

The `Field` component helps manage form-related state and accessibility attributes of a color picker. It includes
handling ARIA labels, helper text, and error text to ensure proper accessibility.

<Example id="with-field" />

### Root Provider

Use the `useColorPicker` hook to create the color picker store and pass it to the `ColorPicker.RootProvider` component.
This allows you to have maximum control over the color picker programmatically.

<Example id="root-provider" />

> If you're using the `ColorPicker.RootProvider` component, you don't need to use the `ColorPicker.Root` component.

## API Reference

### Props

<ComponentTypes id="color-picker" />

### Context

These are the properties available when using `ColorPicker.Context`, `useColorPickerContext` hook or `useColorPicker`
hook.

<ContextType id="color-picker" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="color-picker" />
